<template>
    <div class="visitor">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <div class="top">
                        <el-tag class="free" size="small">{{ user.isInsure == 1 ? '医保' : "自费" }}</el-tag>
                        <span class="username">{{ user.name }}</span>
                    </div>
                    <div>
                        <el-button type="primary" size="default" :icon="Edit" circle @click="handler" />
                        <el-popconfirm @confirm="removeUser" :title="`确定要删除${user.name}吗？`" width="200px">
                            <template #reference>
                                <el-button v-if="$route.path == '/user/patient'" type="danger" size="default" :icon="Delete" circle />
                            </template>
                        </el-popconfirm>
                    </div>

                </div>
            </template>
            <div class="bottom">
                <p>证件类型：{{ user.param.certificatesTypeString }}</p>
                <p>证件号码：{{ user.certificatesNo }}</p>
                <p>用户性别：{{ user.sex == 0 ? '女士' : '男士' }}</p>
                <p>出生日期：{{ user.birthdate }}</p>
                <p>手机号码：{{ user.phone }}</p>
                <p>婚姻状况：{{ user.isMarry == 0 ? "未婚" : "已婚" }}</p>
                <p>当前住址：{{ user.param.cityString }}</p>
                <p>详细地址：{{ user.param.fullAddress }}</p>
                <!-- 红色已选择盒子 -->
                <div class="confirm" v-if="index == currentIndex">
                    已选择
                </div>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { reqRemoveUser } from "../../api/user";
// 引入element-plus 图标
import { Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
// 接收父组件传递过来的就诊人信息展示
// user 就诊人信息 index 索引值  currentIndex 选中的就诊人索引值
let props = defineProps(['user', 'index', 'currentIndex']);
let $emit = defineEmits(['changeScence','removeUser']);
let $route = useRoute();
let $router = useRouter();
const handler = () => {
    if ($route.path == '/user/patient') {
        $emit('changeScence', props.user)
    } else {
        // 路由跳转携带参数
        $router.push({ path: '/user/patient', query: { type: 'edit', id: props.user.id } })
    }
}
//确认删除回调
const removeUser = async() =>{
    try {
        // 删除成功
        await reqRemoveUser(props.user.id);
        ElMessage({
            type:'success',
            message:'删除成功'
        }),
        // 删除成功触发自定义事件
        $emit('removeUser');
    } catch (error) {
        ElMessage({
            type:'error',
            message:'删除失败'
        })
    }
}
</script>

<style lang="scss" scoped>
.visitor {
    .box-card {
        :deep(.el-card__header) {
            background-color: #dedede;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .top {
                .free {
                    background-color: #f1f1f1;
                    margin-right: 3px;
                }
            }
        }

        position: relative;

        .bottom {
            p {
                margin: 10px 0;
                // line-height: 30px
            }

            .confirm {
                font-weight: 700;
                color: red;
            }

        }



    }

}
</style>